<template>
<div class="select-folder">
    <div class="search-wrap">
        <el-input clearable placeholder="搜索" v-model="filterText">
            <i slot="prefix" class="iconfont icon-sousuo"></i>
        </el-input>
        <i class="iconfont icon-xinzengwenjianjia" @click="newFolderObj.value = '';newFolderObj.show = true"></i>
    </div>
    <div class="scroll-bar" style="width: 99.9%">
        <el-tree @node-expand="nodeExpand" @node-collapse="nodeCollapse" v-loading="loading" ref="tree" node-key="id" :highlight-current="true" :data="treeData" default-expand-all :filter-node-method="filterNode" @node-click="handleClickNode">
            <template slot-scope="{data}">
                <span class="tree-node-span">
                    <i class="iconfont tree-node-icon" :class="data.iconType"></i>
                    <span>{{data.label}}</span>
                </span>
            </template>
        </el-tree>
    </div>
    <confirm-dialog v-if="newFolderObj.show" @save="newFolderSave" :confirmObj="newFolderObj"></confirm-dialog>
</div>
</template>
<script>
import { mapGetters, mapMutations } from 'vuex'
import ConfirmDialog from '@/components/ConfirmDialog'
import {
    folderList
} from '@/js/tool'
export default {
    name: 'SelectFolder',
    components: { ConfirmDialog },
    props: ['value'],
    data () {
        return {
            loading: false,
            treeData: [],
            parentCatalogId: null,
            filterText: '',
            newFolderObj: {
                show: false,
                title: '新建文件夹',
                size: 20,
                value: '',
                leftTitle: '文件夹名称',
                placeholder: '请输入文件夹名称'
            }
        }
    },
    computed: {
        ...mapGetters({
            projectId: 'common/getProjectId'
        })
    },
    watch: {
        filterText (val) {
            this.$refs.tree.filter(val)
        }
    },
    created () {
        this.init()
    },
    methods: {
        ...mapMutations({
            setUpdateExp: 'common/setUpdateExp'
        }),
        setId () {
            this.$nextTick(() => {
                if (this.value) {
                    this.parentCatalogId = this.value
                    this.$refs.tree.setCurrentKey(this.value)
                } else {
                    let dom = this.$refs.tree.$el.getElementsByClassName('is-current')[0]
                    dom && dom.classList.remove('is-current')
                }
            })
        },
        init () {
            this.loading = true
            const parmas = {
                keyword: '',
                projectId: this.projectId
            }
            this.$post('/experiment/catalog/queryExperimentCatalog', parmas).then(res => {
                if (res) {
                    this.treeData = folderList([res.root], 'catalogId', 'catalogName')
                    this.setId()
                }
            }).finally(() => {
                this.loading = false
            })
        },
        newFolderSave (value) {
            this.$post('/experiment/catalog/createCatalog', {
                projectId: this.projectId,
                catalogName: value,
                parentCatalogId: this.parentCatalogId
            }).then(res => {
                if (res) {
                    this.newFolderObj.show = false
                    this.$message.success('保存成功')
                    this.init()
                    this.setUpdateExp(Math.random())
                }
            })
        },
        filterNode (value, data) {
            if (!value) return true
            return data.label.includes(value)
        },
        handleClickNode (item) {
            this.parentCatalogId = item.id
            this.$emit('input', item.id)
        },
        nodeCollapse (item) {
            item.iconType = 'icon-catalog-close'
        },
        nodeExpand (item) {
            item.iconType = 'icon-catalog-open'
        }
    }
}
</script>
<style lang="less">
    .select-folder {
        width: 320px;
        color: #606266;
        background-color: #FFF;
        background-image: none;
        border: 1px solid #DCDFE6;
        border-radius: 4px;
        transition: border-color .2s cubic-bezier(.645,.045,.355,1);
        .scroll-bar {
            height: 108px;
        }
        .tree-node-icon {
            margin-right: 5px;
        }
        .search-wrap {
            padding: 5px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .icon-xinzengwenjianjia {
                margin-left: 8px;
                cursor: pointer;
                color: #2680EB;
            }
        }
    }
</style>
